/* 标签样式类 */
.tag{
	border: 1px solid $main;
	font-size: 24upx;
	background-color: $main;
	padding:0 12upx;
	display: inline-block;
	color: $mainInverse;
	-webkit-border-radius: 6upx;
	-moz-border-radius: 6upx;
	border-radius: 6upx;
	vertical-align: middle;
	
	&.orangeBg{
		background-color: $orange;
		border-color: $orange;
	}
	
	&.greenBg{
		background-color: $green;
		border-color: $green;
	}
	
	&.redBg{
		background-color: $red;
		border-color: $red;
	}
	
	&.line{
		background-color: transparent;
		color: $main;
	}
	&+.tagGroup , &+.tag{
		margin-left: 10upx;
	}
	
	// @for $i from 1 through length($colorMap) {
	// 	$item : nth($colorMap , $i) ;
	// 	&.#{map-get( $item , name )}{
	// 		border-color: map-get( $item , color );
	// 		background-color: map-get( $item , color );
	// 		color: map-get( $item , inverse )!important;
	// 		&.line{
	// 			background-color: transparent;
	// 			color: map-get( $item , color )!important;
	// 		}
	// 	}
	// }
	
	// @for $i from 1 through length($gradualColorMap) {
	// 	$item : nth($gradualColorMap , $i) ;
	// 	&.#{map-get( $item , name )}{
	// 		border-color: transparent ;
	// 		background-image: map-get( $item , color )!important;
	// 		color: map-get( $item , inverse )!important;
	// 		-webkit-background-clip: border-box;
	// 		background-clip: border-box;
	// 		-webkit-text-fill-color:  map-get( $item , inverse );
	// 		&.line{
	// 			border-color: map-get( $item , safeColor );
	// 			background-color: transparent;
	// 			color: map-get( $item , safeColor )!important;
	// 			background-image: #{map-get( $item , colorRight )} !important;
	// 			-webkit-background-clip: text;
	// 			background-clip: text;
	// 			-webkit-text-fill-color: transparent!important;
	// 		}
	// 	}
	// }
}

.tagGroup{
	display: inline-flex;
	vertical-align: middle;
	border: 1px solid $main;
	-webkit-border-radius: 6upx;
	-moz-border-radius: 6upx;
	border-radius: 6upx;
	overflow: hidden;
	>.tag{
		padding: 0 10upx;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		border: none;
		color: $main;
		background-color:$lightMain ;
		& +.tag{
			margin-left: 0;
			border-left: 1px dashed $main;
		}
		&.line{
			background-color: transparent;
			color: $main;
		}
	}
	
	&.yellowBg{
		background-color: transparent;
		border-color: $yellow;
		>.tag{
			color: $yellow;
			background-color: $lightYellow;
			& +.tag{
				border-left: 1px dashed $yellow;
			}
			&.line{
				background-color: transparent;
				color: $yellow;
			}
		}
	}
	
	&.redBg{
		background-color: transparent;
		border-color: $red;
		>.tag{
			color: $red;
			background-color: $lightRed;
			& +.tag{
				border-left: 1px dashed $red;
			}
			&.line{
				background-color: transparent;
				color: $red;
			}
		}
	}
	
	&+.tagGroup , &+.tag{
		margin-left: 10upx;
	}
	
	// @for $i from 1 through length($colorMap) {
	// 	$item : nth($colorMap , $i) ;
	// 	&.#{map-get( $item , name )}{
	// 		border-color: map-get( $item , color );
	// 		>.tag{
	// 			color:  map-get( $item , color );
	// 			background-color: map-get( $item , light );
	// 			& +.tag{
	// 				border-left-color: map-get( $item , color ) ;
	// 			}
	// 			&.line{
	// 				background-color: transparent;
	// 				color:  map-get( $item , color );
	// 			}
	// 		}
	// 	}
	// }
}

.tag-right{
	background-color: $main;
	color: $mainInverse;
	font-size: 12px;
	display: inline-block;
	padding: 2px 3px 1px 5px ;
	position: relative;
	&:after{
		position: absolute;
		right: -4px;
		top: 0;
		bottom: 0;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-top:10px solid transparent;
		border-bottom:10px solid transparent;
		border-left:4px solid $main;
	}
} 

.tag-down{
	width: 30px;
	padding-top: 2px;
	line-height: 27px;
	height: 27px;
	text-align: center;
	background-color: $main;
	color: $mainInverse;
	font-size: 12px;
	 &:after{
		content: '';
		display: block;
		height:0;
		width:0;
		border-top:7px solid $main;
		border-right:15px solid transparent;
		border-left:15px solid transparent;
		position: relative;
		top: -2px;
	 }
}